<template>
	<view class="paytype">
		<uni-icons class="close_icon" type="closeempty" size="24" color="#979797" @click="closeDiscountPop"></uni-icons>
		<view class="title">
			支付金额
		</view>
		<view class="price">
			￥ <text class="payprice">{{payprice}}</text>
		</view>

		<radio-group @change="radioChange">
			<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
				<view class="type_name">
					<view class="type_imgs">
						<image class="type_img" :src="IMGLink+item.icon"></image>
					</view>
					<text>{{item.name}}</text>
				</view>
				<radio :value="item.value" :checked="index+1 === current" />
			</label>
		</radio-group>

		<button type="default" class="open_btn" v-if="userinfo.user_level_id == '0'" @click="goOpen">立即开通</button>
		<button type="default" class="open_btn" v-else @click="goOpen">立即续费</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import { vips } from "@/api/my/my.js";
	export default {
		name: "paytype",
		props: {
			payprice: {
				type: String,
				value: ""
			}
		},
		data() {
			return {
				IMGLink: this.IMGLink,
				items: [{
						value: '1',
						name: '红包支付',
						icon: "/my/red_icon.png",
					},
					{
						value: '2',
						name: '余额支付',
						icon: "/my/balance_icon.png",
					},
					{
						value: '3',
						name: '微信支付',
						checked: 'true',
						icon: "/my/wechat_icon.png",
					}
				],
				current: 3,
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		watch: {

		},
		methods: {
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i+1;
						break;
					}
				}
			},
			// 开通会员
			goOpen() {
				this.$emit('goOpen',this.current);
			},
			
			closeDiscountPop() {
				this.$emit('closeDiscountPop');
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "../my/my.scss";

	.paytype {
		position: relative;
		padding: 48rpx 30rpx;
		background: #fff;
		border-radius: 18px 18px 0px 0px;

		.close_icon {
			position: absolute;
			right: 16rpx;
			top: 45rpx;
		}

		.title,
		.price {
			text-align: center;
			font-weight: 500;
		}

		.title {
			color: #070707;
			font-size: 36rpx;
		}

		.price {
			color: #070707;
			font-size: 36rpx;
			margin-top: 30rpx;

			.payprice {
				font-size: 60rpx;
			}
		}

		.uni-list-cell {
			line-height: 100rpx;
			@include flexLayout(center, space-between);

			.type_name {
				@include flexLayout(center, flex-start);
				color: #242424;
				font-size: 32rpx;

				.type_imgs {
					@include flexLayout(center, flex-start);
					width: 60rpx;
				}

				.type_img {
					width: 36rpx;
					height: 46rpx;
				}
			}
		}

		.uni-list-cell:not(:last-child) {
			border-bottom: 2rpx solid #f5f5f5;
		}

		.uni-list-cell:nth-child(2) {
			.type_img {
				width: 40rpx;
				height: 36rpx;
			}
		}

		.uni-list-cell:nth-child(3) {
			.type_img {
				width: 44rpx;
				height: 40rpx;
			}
		}

		.open_btn {
			width: 96%;
			margin: 40rpx 2% 20rpx;
			color: #FFFFFF;
			height: 88rpx;
			line-height: 88rpx;
			background: #F54642;
			border-radius: 44rpx;
		}
	}
</style>
